<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小黄豆表情</title>
    <style>
        :root{
            --shine: rgb(251,136,200);
            --primary-color: rgb(248,175,40);
            --secondary-color: rgb(230,63,2);
            --accent-color: rgb(58,25,25);
            --black-fade: rgb(120,40,6);
            --dark-blue: rgb(84,84,174);
        }
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        body{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
            background-color: #9197f1;
        }
        #emoji{
            position: relative;
            width: 450px;
            height: 400px;
            transform: translate3d(0,0,0);
        }
        .hover{
            position: absolute;
            width: 330px;
            height: 330px;
            border-radius: 100%;
        }
        .layer{
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .face,
        .shine,
        .hover{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
        .face{
            width: 230px;
            height: 230px;
            background-color: #FECA32;
            border-radius: 100%;
            box-shadow: inset #0006 0 0 30px;
            transition: .3s;
        }
        .shine{
            width: 194px;
            height: 206px;
            background: linear-gradient(to bottom,#FFF,#FFF0,50%,#FFF0);
            border-radius: 100%;
            opacity: 0.8;
        }
        .eye{
            width: 24px;
            height: 38px;
            background-color: #A1620F;
            border-radius: 100%;
            box-shadow: inset #0008 0 6px 12px,#fff3 0 2px 0 2px;
            transition: .3s;
        }
        .eye.left{
            position: absolute;
            top: 0;
            right: 70px;
            bottom: 40px;
            left: 0;
            margin: auto;
        }
        .eye.right{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 40px;
            left: 70px;
            margin: auto;
        }
        .left::before,
        .right::before{
            content: "";
            position: absolute;
            z-index: 3;
            width: 100px;
            height: 85px;
            border-radius: 50px;
            bottom: 80px;
            opacity: 0;
        }
        .left::before{
            right: 0px;
            transform: rotateZ(25deg);
            background: radial-gradient(circle at 0 0,transparent 80%,var(--black-fade)80%,var(--black-fade)90%,transparent 90%);
        }
        .right::before{
            left: 0px;
            transform: rotateZ(-25deg);
            background: radial-gradient(circle at 100% 0,transparent 80%,var(--black-fade)80%,var(--black-fade)90%,transparent 90%);
        }
        .mouth{
            position: absolute;
            top: 88px;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            overflow: hidden;
            width: 94px;
            height: 48px;
            transition: .3s;
        }
        .mouth::before{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 10px;
            left: 0;
            margin: auto;
            content: "";
            width: 100%;
            height: 100%;
            background-color: #FFF4 0 3px 0;
            transform: scale(1);
        }
        .mouth::after{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 26px;
            left: 0;
            margin: auto;
            content: "";
            width: calc(100% - 20px);
            height: 100%;
            background-color: #FECA32;
            border-radius: 100%;
            box-shadow: #000C 0 4px 4px -4px;
            transform-origin: 50% 100%;
            transform: scale(1.6);
        }
        #emoji:has(.hover:hover) .face{
            background-color: rgb(230,80,7);
        }
        #emoji:has(.hover:hover) .eye{
            height: 30px;
            box-shadow: inset #0008 0 6px 12px,rgba(250,160,55,.3) 0 2px 0 2px;
        }
        #emoji:has(.hover:hover) .left,
        #emoji:has(.hover:hover) .right{
            top: 45px;
            bottom: 40px;
        }
        #emoji:has(.hover:hover) .left::before,
        #emoji:has(.hover:hover) .right::before{
            opacity: 1;
            bottom: 40px;
            transition: .3s;
        }
        #emoji:has(.hover:hover) .mouth{
            overflow: visible;
            top: 120px;
            width: 84px;
            height: 35px;
            transform: translate3d(0,0,0);
            background: var(--black-fade);
            border-radius: 60%/80%;
            box-shadow: inset 0 0 10px 1px black;
        }
        #emoji:has(.hover:hover) .mouth:after {
            transform: scale(1);
            width: 68px;
            height: 75px;
            background: linear-gradient(90deg, transparent 45%, var(--black-fade)50%, transparent 55%),
                radial-gradient(circle at 50% 10%, rgb(240, 40, 115), var(--shine)55%);
            background-repeat: no-repeat;
            background-size: 100% 50%,
                100% 100%;
            top: 15px;
            bottom: auto;
            left: 50%;
            margin: auto -34px;
            border-radius: 7px 7px 50% 50%/10% 10% 50% 50%;
            filter: blur(2px);
            box-shadow: inset 0 -2px 3px 0 mediumvioletred,
                inset 0 -5px 10px 7px rgb(240, 40, 115), 0 5px 10px 1px black;
        }
    </style>
</head>
<body>
    <ul id="emoji">
        <li class="layer" data-depth="0.2">
            <div class="face"></div>
        </li>
        <li class="layer" data-depth="0.3">
            <div class="shine"></div>
        </li>
        <li class="layer" data-depth="0.8">
            <div class="eye left"></div>
        </li>
        <li class="layer" data-depth="0.8">
            <div class="eye right"></div>
        </li>
        <li class="layer" data-depth="0.8">
            <div class="mouth"></div>
        </li>
        <div class="hover"></div>
    </ul>
    
</body>
<!-- parallax视察插件 -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js"></script>
<script>
    var options = {
        invertX: false,   // 水平方向反转
        invertY: false,   // 垂直方向反转
        limitX: 40,   // 水平方向限制
        limitY: 40// 垂直方向限制
    }
    var emoji = document.getElementById('emoji');  // 获取元素id为emoji的DOM对象
    var parallax = new Parallax(emoji, options);   // 创建新的视差对象并传入emoji和options参数

</script>
</html>